* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ui-member {
    display: block;
    width: 100%;
    min-height: 100%;
    padding: 0 .16rem .12rem;
    background-color: #efefef;
    background-position: center top;
    background-size: 100% 3.6rem;
    background-repeat: no-repeat;
    background-image: url(../../image/me/bgi-member.png);
}

.ui-top {
    display: block;
    position: relative;
    width: 100%;
    height: 2.6rem;
    padding-top: .32rem;
    .ui-top-item {
        display: block;
        width: 100%;
        height: 1.28rem;
        .ui-top-icon {
            display: block;
            width: 1.6rem;
            height: 1rem;
            margin: 0 auto;
            background-position: center center;
            background-size: 1.46rem .88rem;
            background-repeat: no-repeat;
            background-image: url(../../image/me/member-header.png);
        }
        .ui-top-name {
            display: block;
            width: 100%;
            line-height: .3rem;
            font-size: .3rem;
            color: #fff;
            text-align: center;
            padding-top: .3rem;
        }
        .ui-top-body {
            display: block;
            width: 100%;
            height: .24rem;
            margin: .16rem 0; // background-color: red;
            .ui-body-item {
                float: left;
                line-height: .24rem;
                font-size: .24rem;
                color: #fff;
                margin-right: .2rem;
            }
        }
        .ui-top-address {
            display: block;
            width: 100%;
            height: .24rem;
            line-height: .24rem;
            font-size: .24rem;
            color: #9C9C9C;
        }
    }
}

.ui-list {
    display: block;
    width: 100%;
    height: 4rem;
    padding: .15rem .3rem;
    background-color: #fff;
    border-radius: .16rem;
    margin-bottom: .3rem;
    .ui-list-title {
        display: block;
        width: 100%;
        height: .9rem;
        line-height: .9rem;
        font-size: .34rem;
        font-weight: SourceHanSansCN-Regular;
        color: #232323;
        border-bottom: 1px solid #efefef;
    }
    .ui-list-item {
        display: block;
        width: 100%;
        height: .64rem;
        padding-top: .44rem;
        .ui-item-title {
            float: left;
            position: relative;
            width: 1.68rem;
            line-height: .3rem;
            font-size: .3rem;
            color: #232323;
            padding-left: .4rem;
            .ui-title-icon {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: .4rem;
                height: .3rem;
                background-position: left center;
                background-repeat: no-repeat;
                background-size: .3rem .3rem;
            }
            .see {
                background-image: url(../../image/me/member-see.png);
            }
            .free {
                background-image: url(../../image/me/member-free.png);
            }
            .time {
                background-image: url(../../image/me/member-time.png);
            }
            .happy {
                background-image: url(../../image/me/member-happy.png);
            }
        }
        .ui-item-text {
            float: left;
            line-height: .3rem;
            font-size: .24rem;
            color: #9c9c9c;
        }
    }
    .ui-rule {
        display: block;
        padding: .16rem .1rem;
        .ui-rule-item {
            display: block;
            position: relative;
            float: left;
            width: 48%;
            height: 1.2rem;
            text-align: center;
            border: 1px solid #9c9c9c;
            border-radius: .12rem;
            margin-bottom: .2rem;
            transition: all .1s linear;
            &:nth-child(2n) {
                float: right;
            }
            .ui-item-member{
                display: block;
                position: absolute;
                top: .24rem;
                left: .2rem;
                width: 1rem;
                height: .4rem;
                line-height: .4rem;
                font-size: .28rem;
                color: #aaa;
                text-align: right;
            }
            .ui-item-title{
                display: block;
                position: absolute;
                top: .64rem;
                left: .2rem;
                width: 1rem;
                height: .4rem;
                line-height: .4rem;
                font-size: .28rem;
                color: #555;
                text-align: right;
            }
            .ui-item-yuan{
                display: block;
                position: absolute;
                top: .12rem;
                right: .3rem;
                width: .3rem;
                line-height: .3rem;
                height: .3rem;
                font-size: .24rem;
                color: #333;
                &:after{
                    content: '/';
                    display: block;
                    position: absolute;
                    bottom: -.3rem;
                    left: 0;
                    width: .3rem;
                    height: .3rem;
                }
            }
            .ui-item-yue{
                display: block;
                position: absolute;
                top: .72rem;
                right: .3rem;
                width: .3rem;
                line-height: .3rem;
                height: .3rem;
                font-size: .24rem;
                color: #333;
            }
            .ui-item-money{
                display: block;
                position: absolute;
                top: .32rem;
                right: .7rem;
                width: 1rem;
                line-height: .6rem;
                font-size: .52rem;
                color: #232323;
                text-align: right;
            }
            .select {
                color: #E1CC83;
            }
        }
        .selected {
            box-shadow: 0 0 3px 2px #E1CC83;
            border-color: #fff;
            color: #E1CC83;
        }
    }
    .ui-pay {
        display: block;
        .ui-pay-item {
            display: block;
            position: relative;
            line-height: 1.12rem;
            font-size: .36rem;
            color: #232323;
            padding-left: 1.06rem;
            border-bottom: 1px solid #efefef;
            .ui-pay-icon {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 1rem;
                height: 1.12rem;
                background-position: left center;
                background-repeat: no-repeat;
                background-size: .64rem .64rem;
            }
            .alipay {
                background-image: url(../../image/me/member-alipay.png);
            }
            .wechat {
                background-image: url(../../image/me/member-wechat.png);
            }
            .selected{
                display: block;
                position: absolute;
                top: 0;
                right: .2rem;
                width: 1rem;
                height: 1.12rem;
                border-radius: 50%;
                background-position: right center;
                background-repeat: no-repeat;
                background-size: .56rem .565rem;
                background-image: url(../../image/me/pay-selected.png);
            }
        }
        .ui-pay-money {
            display: block;
            width: 100%;
            line-height: .6rem;
            font-size: .28rem;
            color: #232323;
        }
        .number {
            color: #F098EF;
        }
    }
}

.paddingTop {
    padding: .1rem .3rem;
}

.ui-btn__next {
    display: block;
    width: 4rem;
    height: .88rem;
    line-height: .34rem;
    font-size: .34rem;
    text-align: center;
    margin: 0 auto;
    color: white;
    border-radius: .44rem;
    padding: .27rem 0;
    cursor: pointer;
    margin-bottom: .3rem;
    letter-spacing: 2px;
    background-color: #E1CC83;
    border: none;
    outline: none;
}